import React, { Component } from 'react'
import './style.scss'
import { Route } from 'react-router-dom'
import WuIcon from '../wuIcon'

class PageFooterNav extends Component {
  goRoutePage = url => () => {
    this.props.history.replace(url)
  }

  render() {
    return (
      <div className='page-footer-nav'>
        <Route
          path='/cookbook'
          children={({ match }) => {
            return (
              <div className={match ? 'active' : ''} onClick={this.goRoutePage('/cookbook')}>
                <WuIcon type='icon-take_away' />
                <span>首页</span>
              </div>
            )
          }}
        />
        <Route
          path='/category'
          children={({ match }) => {
            return (
              <div className={match ? 'active' : ''} onClick={this.goRoutePage('/category')}>
                <WuIcon type='icon-fenlei' />
                <span>分类</span>
              </div>
            )
          }}
        />
        <Route
          path='/me'
          children={({ match }) => {
            return (
              <div className={match ? 'active' : ''} onClick={this.goRoutePage('/me')}>
                <WuIcon type='icon-gerentouxiang_o' />
                <span>个人</span>
              </div>
            )
          }}
        />
      </div>
    )
  }
}

export default PageFooterNav
